import React, { useState } from 'react';
// import logo from '@/assets/mi-logo.png'
import styles from './header.less';
import { SearchOutlined } from '@ant-design/icons';

const searchFocus = (setFoucsStyle: any) => {
  return () => {
    setFoucsStyle({
      borderColor: '#ff6700',
    });
  };
};

export default () => {
  const [foucsStyle, setFoucsStyle] = useState({});
  return (
    <div className={styles.header}>
      <div className={styles.logo}>
        <a href="https://www.mi.com"></a>
      </div>
      <div className={styles.nav}>
        <ul>
          <li>小米手机</li>
          <li>Redmi 手机</li>
          <li>电视</li>
          <li>笔记本</li>
          <li>家电</li>
          <li>路由器</li>
          <li>智能硬件</li>
          <li>服务</li>
          <li>社区</li>
        </ul>
      </div>
      <div className={styles.search}>
        <input
          type="text"
          onFocus={searchFocus(setFoucsStyle)}
          onBlur={() => {
            setFoucsStyle({});
          }}
          style={foucsStyle}
        />
        <button style={foucsStyle} type="button">
          <SearchOutlined style={{ fontSize: '18px', fontWeight: 800 }} />
        </button>
        <div
          className={styles.hotWords}
          style={Object.keys(foucsStyle).length > 0 ? { display: 'none' } : {}}
        >
          <a href="">小米9 Pro 5G</a>
          <a href="">Redmi Note 8</a>
        </div>
        <div
          className={styles.keywordList}
          style={Object.keys(foucsStyle).length > 0 ? {} : { display: 'none' }}
        >
          <ul>
            <li data-key="小米 9">
              <a href="//search.mi.com/search_%E5%B0%8F%E7%B1%B3%209">
                {' '}
                小米 9
              </a>
            </li>
            <li data-key="Redmi K20 pro">
              <a href="//search.mi.com/search_Redmi%20K20%20pro">
                {' '}
                Redmi K20 pro
              </a>
            </li>
            <li data-key="Redmi K20">
              <a href="//search.mi.com/search_Redmi%20K20"> Redmi K20</a>
            </li>
            <li data-key="Redmi Note 7 Pro">
              <a href="//search.mi.com/search_Redmi%20Note%207%20Pro">
                Redmi Note 7 Pro
              </a>
            </li>
            <li data-key="Redmi&nbsp;note&nbsp;7">
              <a href="//search.mi.com/search_Redmi%26nbsp%3Bnote%26nbsp%3B7">
                {' '}
                Redmi&nbsp;note&nbsp;7
              </a>
            </li>
            <li data-key="小米电视4c">
              <a href="//search.mi.com/search_%E5%B0%8F%E7%B1%B3%E7%94%B5%E8%A7%864c">
                小米电视4c
              </a>
            </li>
            <li data-key="电视32英寸">
              <a href="//search.mi.com/search_%E7%94%B5%E8%A7%8632%E8%8B%B1%E5%AF%B8">
                {' '}
                电视32英寸
              </a>
            </li>
            <li data-key="笔记本pro">
              <a href="//search.mi.com/search_%E7%AC%94%E8%AE%B0%E6%9C%ACpro">
                {' '}
                笔记本pro
              </a>
            </li>
            <li data-key="小爱音箱">
              <a href="//search.mi.com/search_%E5%B0%8F%E7%88%B1%E9%9F%B3%E7%AE%B1">
                {' '}
                小爱音箱
              </a>
            </li>
            <li data-key="净水器">
              <a href="//search.mi.com/search_%E5%87%80%E6%B0%B4%E5%99%A8">
                {' '}
                净水器
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};
